Динамическое построение дерева

[prog_f130]

Добрый день. Цель при клике по узлу дерева подгружать дочерние элементы.

При открытии страницы загружаются самые нижние узлы.
По такому принципу и

<ul id="n-ul-Top" class="TreeContainer">
  <li id="57fdd652c4a59fea5821da98" class="Node IsRoot">
    Theme 1
    <ul id="n-ul-57fdd652c4a59fea5821da98" class="TreeContainer"></ul>
  </li>
</ul>

На клик по li вешается обработчик.

(function($, undefined) {
    $(function(){
        $('li.Node').click(function(){
         
            var target_ul='#n-ul-'+$(this).attr("id");
            var url='/catalog/'+$(this).attr("id");
            console.log($(this).attr("id"));
            $.getJSON(url, function(data){
                data.forEach(function(item) {
                    $(target_ul).append('<li class="Node" id='+item._id+'>'+item.caption+'</li>');
                    
                    $('#'+item._id).append('<ul class="TreeContainer" id="n-ul-'+item._id+'">');
                });
            });
            return false;
        });
    });    
})(jQuery);

Проблема в том, что корректно добавляются только элементы в корневые узлы, которые были построены заранее, а при клике по дочерним, которые были динамически отрисованы операция повторяется для коренных узлов, т.е. console.log($(this).attr("id"));
в любом случае возвращает id коренного li, хотя если смотреть разметку id присвоены верно. ЧЯДНТ? Спасибо.

P.S. Только сейчас заметил, что есть отдельный раздел JQuery, сорян, что промахнулся.

[рони]

prog_f130,
... клик ставят на то что есть всегда ... если это body то на body , чем ближе тем лучше ... и всплытие клика по дереву отменяют , иначе сработают все узлы вверх ...

$('body').on('click','li.Node',function(event){ event.preventDefault()

[prog_f130]

Дак вроде бы return false; прерывает всплытие?
И к тому же в таком случае console.log($(this).attr("id")) вывел бы последовательно все id начиная с дочерних, а не только родительского?

[рони]

Дак вроде бы return false; прерывает всплытие?

ок. в остальном читайте про делегирование, jquery не телепат, и у неё нет механизма слежения за добавлением новых элементов.

[prog_f130]

Спасибо за совет, изучил. Если кому нужно, получился такой скрипт:

(function($, undefined) {
    $(function(){
        $('ul#n-ul-Top').click(function(event){
            var target, target_ul, url;
            
            //поддержка кроссбраузерности
            event = event || window.event;
            target = event.target || event.srcElement;
            
            if (target.tagName !== 'LI') return false;
            target_ul='#n-ul-'+target.id;
            url='/catalog/'+target.id;
            
            if ($(target).hasClass("isOpen")){
                $(target).removeClass("isOpen");
                $(target_ul).empty();
            } else{
                $.getJSON(url, function(data){
                    $(target).addClass("isOpen");
                    data.forEach(function(item) {
                        $(target_ul).append('<li class="Node" id='+item._id+'>'+item.caption+'</li>');
                        $('#'+item._id).append('<ul class="TreeContainer" id="n-ul-'+item._id+'">');
                    });
                });    
            }
            return false;
        });
    });    
})(jQuery);

[рони]

prog_f130,
в формате jquery не изучили, смотрите пост 2 и выкиньте строки 6 - 10 пост 5

[prog_f130]

Да, я уже понял, переписал

(function($, undefined) {
    $(function(){
        $('ul#t-ul-Top').delegate("a", "click", function(){
            //....
            $.getJSON(url, function(data){
            //...
            }
            return false;
        });    
    });    
})(jQuery);

[рони]

delegate

нет такой буквы!!! есть on порядок аргументов смотрите в документации http://api.jquery.com/on/ или в посте №2
P.S. обновите версию jquery

[рони]

Rise,
рекомендации использовать on уже давно прописаны в документации delegate